"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Plus, Trash2, Download, ArrowUpDown, Eye, ChevronLeft, ChevronRight } from "lucide-react"

interface Report {
  id: string
  name: string
  template: string
  dataSource: string
  generateTime: string
  version: string
  preview: string
}

interface ResultManagementProps {
  onNavigateToMain: () => void
}

export default function ResultManagement({ onNavigateToMain }: ResultManagementProps) {
  // 按创建时间倒序排列
  const [reports] = useState<Report[]>([
    {
      id: "1",
      name: "2024年1月财务报告",
      template: "月度财务报告模板",
      dataSource: "2024年1月财务数据",
      generateTime: "2024-01-20", // 最近的日期
      version: "v1.2",
      preview: "本月总收入125万元，较上月增长8.5%...",
    },
    {
      id: "2",
      name: "市场分析季度报告",
      template: "市场分析报告模板",
      dataSource: "市场调研问卷结果",
      generateTime: "2024-01-18", // 第二近的日期
      version: "v2.1",
      preview: "市场满意度达到85%，同比提升12%...",
    },
    {
      id: "3",
      name: "员工绩效评估报告",
      template: "员工绩效评估模板",
      dataSource: "员工绩效评分表",
      generateTime: "2024-01-15", // 第三近的日期
      version: "v1.0",
      preview: "员工平均绩效评分为4.2分，较上季度提升0.3分...",
    },
  ])

  // 分页状态
  const [currentPage, setCurrentPage] = useState(1)
  const [itemsPerPage] = useState(10)
  const totalPages = Math.ceil(reports.length / itemsPerPage)

  return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold">结果管理</h1>
        <Button onClick={onNavigateToMain}>
          <Plus className="h-4 w-4 mr-2" />
          生成报告
        </Button>
      </div>

      <div className="border rounded-lg">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="cursor-pointer">
                报告名称 <ArrowUpDown className="h-4 w-4 inline ml-1" />
              </TableHead>
              <TableHead>关联模板</TableHead>
              <TableHead>关联数据</TableHead>
              <TableHead className="cursor-pointer">
                生成时间 <ArrowUpDown className="h-4 w-4 inline ml-1" />
              </TableHead>
              <TableHead>报告版本</TableHead>
              <TableHead>报告预览</TableHead>
              <TableHead>操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {reports.map((report) => (
              <TableRow key={report.id}>
                <TableCell className="font-medium">{report.name}</TableCell>
                <TableCell>{report.template}</TableCell>
                <TableCell>{report.dataSource}</TableCell>
                <TableCell>{report.generateTime}</TableCell>
                <TableCell>
                  <Badge variant="outline">{report.version}</Badge>
                </TableCell>
                <TableCell className="max-w-xs">
                  <div className="truncate text-sm text-gray-600">{report.preview}</div>
                </TableCell>
                <TableCell>
                  <div className="flex gap-2">
                    <Button variant="outline" size="sm">
                      <Eye className="h-4 w-4" />
                    </Button>
                    <Button variant="outline" size="sm">
                      <Download className="h-4 w-4" />
                    </Button>
                    <Button variant="outline" size="sm">
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>

        {/* 分页器 */}
        <div className="flex items-center justify-center py-4 border-t">
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
              disabled={currentPage === 1}
            >
              <ChevronLeft className="h-4 w-4" />
            </Button>
            <span className="text-sm">
              第 {currentPage} 页，共 {totalPages} 页
            </span>
            <Button
              variant="outline"
              size="sm"
              onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
              disabled={currentPage === totalPages}
            >
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
